<script lang="ts">
import { defineComponent,ref} from "vue";
import { showToast } from 'vant'
import router from "@/router";
export default defineComponent({
    setup(){
        const showShare = ref(false);
        const options = [
            { name: '微信', icon: 'wechat' },
            { name: '微博', icon: 'weibo' },
            { name: '复制链接', icon: 'link' },
            { name: '分享海报', icon: 'poster' },
            { name: '二维码', icon: 'qrcode' },
        ];

        const onSelect = (option:any) => {/^(?:[\u4e00-\u9fa5·]{2,16})$/
          showToast(option.name);
          showShare.value = false;
        };

        let checked = ref(false)
        let name:any = ref(null)
        let id:any = ref(null)
        let idArr:any= []
        let next = () =>{
            let regID = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/  //身份证
            let regName = /^[\u4e00-\u9fa5]{2,6}$/  //姓名
            // regID.test(id.value)
            console.log("id=>",regID.test(id.value))
            console.log("name=>",regName.test(name.value))
            if(regID.test(id.value) && regName.test(name.value)){
               if(checked.value == true){
                  showToast('身份认证成功');
                  router.push({path:"/userinfo"})
               }else if(checked.value == false){
                showToast('请勾选协议');
                return
               }
            }else{
                showToast('请输入正确的姓名与身份号码');
            }

            idArr.push(
                {
                    IDnumber:id.value,
                    realName:name.value
                }
            )
            // 存到local里的
            window.localStorage.setItem("identityArr",JSON.stringify(idArr))
        }
        return{
            options,
            onSelect,
            showShare,
            checked,
            name,
            id,
            next
        }
    }

})

</script>
<template>
    <div class="real-name">
        <div class="real-name-top">
            <span class="iconfont icon-xiangzuojiantou" @click="$router.back()"> </span>
            <h3>实名认证-新片场</h3>
            <!-- <span class="iconfont icon-fenxiang3"></span> -->
            <van-cell class="iconfont icon-fenxiang3" @click="showShare = true" />
        </div>
        <div class="alipay">极速实名认证</div>
        <div class="real-name-content">
            <div class="real-name-yellow">
                <p> 一个账号只可以和一个实名信息绑定,无法解绑或更换 </p> 
            </div>
            <div class="name">
                <p> <span> * </span> 真实姓名</p>
                <input type="text" placeholder="请输入真实姓名" v-model="name">
            </div>
            <div class="id-card">
                <p> <span> * </span>身份证</p>
                <input type="text" placeholder="请输入身份证号码" v-model="id">
            </div>
            <div class="protocol">
                <input type="checkbox" v-model="checked">
                <p> 我已阅读和同意 <span>  《新片场用户协议》 </span> </p> 
            </div>
            <button @click="next">下一步</button>
        </div>
        <div class="footer">
           &copy; 2020新片场 · 京ICP备14003808号 - 1
        </div>
    </div>
          <van-share-sheet
                  v-model:show="showShare"
                  title="立即分享给好友"
                  :options="options"
                  @select="onSelect"
                />
</template>

<style lang="scss">
*{
    padding: 0;
    margin: 0;
}    
.real-name{
    background-color: #f7f7f7;
    .real-name-top{
        height: 43px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        background-color: #ffffff;
        span,h3{
            font-weight: 900;
        }
        .icon-fenxiang3{
            font-size: 25px;
            width: 38px;
        }
    }
    .alipay{
        text-align: center;
        color: #d45348;
        font-size: 17px;
        margin-top: 16px;
        margin-bottom: 16px;
        font-weight: bold;
    }
    .real-name-content{
        background-color: #ffff;
        padding-top: 27px;
        .real-name-yellow{
            width: 309px;
            height: 58px;
            background-color: #fffdf1;
            border: 1px solid #f6ecbb;
            margin: 0px auto;
            margin-bottom: 27px;
            p{
                font-size: 15px;
                margin:10px ;
            }
        }
        .name,.id-card{
           padding-left:30px ;
           padding-right: 30px;
           box-sizing: border-box;
           margin-bottom: 35px;
            p{
                span{
                    color: red;
                }
            }
            input{
                width: 309px;
                height: 38px;
                border: 1px solid #c5c5c5;
                text-indent: 10px;
                margin-top: 10px;
            }
            
        }
    }
    .protocol{
        margin: 0px auto;
        width: 309px;
        padding-top: 20px;
        border-top:2px solid #f7f7f7;
        display: flex;
        justify-content: center;
        p{  
            margin-left: 5px;
            font-size: 16px;
            span{
                color: #5188d4;
            }
        }
    }
    button{
        margin-left: 30px;
        margin-top: 30px;
        outline: none;
        border: none;
        width: 80%;
        height: 40px;
        background-color: #d55645;
        color: #ffff;
        margin-bottom: 20px;
        
    }
    .footer{
        font-size: 11px;
        text-align: center;
        height: 104px;
        box-sizing: border-box;
        padding-top: 80px;
    }
        
}



</style>